<template>
  <div class="activity_signIn">
    <div class="signIn_main" :class="[{ show: !loading }]">
      <div class="banner">
        <ImgT class="imgs" :key="'langKey'" :src="`/imgs/lang/${langKey}/activity/9020.png`" alt="" />
      </div>
      <div class="content_box">
        <div class="content_box_title">{{ t('activity_page_signTitle_detail') }}</div>
        <div class="content_box_main">
          <nut-calendar-card v-model="value" @day-click="dayClickHandle">
            <!-- <template #top="{ day }">
            </template> -->
            <template #default="{ day }">
              <template v-if="day.type === 'current'">
                <span v-if="!signData.sign_status.includes(day.date) && signData.today > day.date" class="not_sign"
                  :class="[{
                    cantResign: !signData.sign_status.includes(signData.today) || !resignInBetEnough
                  }]">
                  {{ t('activity_page_signLost') }}
                </span>
                <span :class="[{
                  today: day.date === signData.today,
                  canSignin: signInBetEnough,
                  signed: signData.sign_status.includes(day.date)
                }]" v-else>
                  {{ day.date <= 9 ? `0${day.date}` : day.date }} </span>
              </template>
              <template v-else>
                {{ day.date }}
              </template>
            </template>
            <template #bottom="{ day }">
              <span v-if="signData.sign_status.includes(day.date)" class="date_icon checked"></span>
              <span
                v-else-if="!signData.sign_status.includes(day.date) && signData.today > day.date && (!signData.sign_status.includes(signData.today) || !resignInBetEnough)"
                class="date_icon lost"></span>
            </template>
          </nut-calendar-card>
          <div class="today_total" :class="[{ showTomorrow: signData.day_status >= 1 }]">
            <div class="row">
              <div class="col">{{ t('activity_page_signCalcTime') }}<span class="time">{{ dateObj.current }}</span>
              </div>
              <div class="col">{{ $currencyMoney(Math.max(maxLevelData.day, signData.day_money), 2, true) }}</div>
            </div>
            <div class="progress">
              <div class="progress_bar" :style="`width: ${countProcss.rateStr}`"></div>
              <div class="text_pecent">{{ $currencyMoney(signData.cur_bet) }}/{{ $currencyMoney(maxLevelData.bet) }}
              </div>
              <div class="icon_coin"></div>
            </div>
            <div class="tomorrow_cover">
              <div>{{ t('activity_page_signTomorrow_countDown') }}</div>
              <div class="time">
                <i class="icon_clock"></i>
                <nut-countdown :start-time="dateObj.curTime" :end-time="dateObj.endTime"></nut-countdown>
              </div>
            </div>
          </div>
          <div class="btn">{{ t('activity_page_conSignIn', { num: contineDays }) }}</div>
          <WeekMonth :signData="signData" :maxLevelData="maxLevelData" @get-award="getGiftMon" />
          <div id="sign_award" class="sign_desc">{{ t('activity_page_sign_getDesc') }}</div>
          <div class="sign_rule_table">
            <div class="header">
              <div class="col" v-html="t('activity_page_dayBet')"></div>
              <div class="col" v-html="t('activity_page_dayPrize')"></div>
              <div class="col" v-html="t('activity_page_weekPrize')"></div>
              <div class="col" v-html="t('activity_page_4weekPrize')"></div>
            </div>
            <div class="row" v-for="(item, index) in awardArr" :key="index">
              <div class="col">≥{{ $currencyMoney(item.bet, 0) }}</div>
              <div class="col">{{ $currencyMoney(item.day, 0) }}</div>
              <div class="col">{{ $currencyMoney(item.week, 0) }}</div>
              <div class="col">{{ $currencyMoney(item.month, 0) }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 活动规则 -->
      <div id="sign_rule" class="content_box">
        <div class="content_box_title">{{ t('activity_page_signTitle_rule') }}</div>
        <div class="content_box_main desc">
          <p v-for="(item) in Array.from({ length: 9 }, (_, index) => index + 1)" :key="item">
            {{ t(`activity_page_signTips_${item}`) }}
          </p>
        </div>
      </div>
      <div class="bottom_btns">
        <nut-button class="btn_b" @click="scrollToSection('sign_rule')">{{ t("activity_page_sign_brnRule")
        }}</nut-button>
        <nut-button class="btn_b signin" :disabled="signData.day_status >= 1" @click="signInHandle">
          {{ t(signData.day_status >= 1 ? "activity_page_signIned" : "activity_page_goSign") }}
        </nut-button>
        <nut-button class="btn_b" @click="shareHandle">{{ t("share") }}</nut-button>
      </div>
      <!-- 分享弹窗 -->
      <shareModal v-model:visible="shareVisible"></shareModal>
      <Modal v-model:visible="showModal">
        <template #header>
          <div class="modal_title">
            <div :class="`modal_title_icon type${modalType}`"></div>{{ t(modalTitleMap[modalType]) }}
          </div>
        </template>
        <div class="popup_body modal_signin">
          <SignConfirm v-if="modalType === 1" :singInSucInfo="singInSucInfo" :signData="signData"
            :nextLevelData="nextLevelData" :currentLevelData="currentLevelData" @go-bet="goToBet"
            @sign-in="signInAction" @go-award="goAwardHandle" />
          <SignTip v-else-if="[2, 3, 5].includes(modalType)" :type="modalType" :singInSucInfo="singInSucInfo"
            :maxLevelData="maxLevelData" @close="showModal = false" />
          <ReSignConfirm v-else-if="[4, 6, 7].includes(modalType)" :singInSucInfo="singInSucInfo" :signData="signData"
            :nextLevelData="nextLevelData" :minLevelData="minLevelData" :type="modalType" @go-bet="goToBet"
            @sign-in="signInAction" />
        </div>
      </Modal>
    </div>
    <OverLoading v-model:visible="loading"></OverLoading>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue";
import shareModal from "@/views/me/components/shareModal.vue";
import dayjs from "dayjs";
import { addLeadingZero } from '@/utils/publicMethods';
import { useRouter } from "vue-router";
import { langObjMap } from '@/enums/langEnum';
import { CalendarCard } from '@nutui/nutui'
import { NetPacket } from "@/netBase/NetPacket";
import PKwebsocket from "@/lolo/Ws";
import { useI18n } from "vue-i18n";
import { returnDoTime } from '@/utils/others';
import { convertDateToObject } from "@/views/records/common/timeData";
import SignTip from "./SignTip.vue";
import SignConfirm from "./SignConfirm.vue";
import ReSignConfirm from "./ReSignConfirm.vue";
import WeekMonth from "./WeekMonth.vue";
import { showToast } from "@nutui/nutui";
import OverLoading from "@/components/Loading.vue";

const { t, locale } = useI18n();
const router = useRouter();
const shareVisible = ref(false);
const showModal = ref(false);
const loading = ref(true);
const langKey = computed(() => langObjMap[locale.value] || 'en');
// 1=签到 2=签到领取成功 3=补签成功 4=补签失败(未达到补签有效投注额) 5=完成今日签到提示 6=补签确认 7=(签到失败)未达到有效投注
const modalType = ref<keyof typeof modalTitleMap>(1);
const singInSucInfo = ref({
  money: 0,
  weekNum: 1,
  week: false,
  month: false,
}); // 签到成功数据
const signInBetEnough = ref(false); // 是否有足够的有效投注可以签到
const resignInBetEnough = ref(false); // 是否有足够的有效投注可以补签
const isResign = ref(false); // 是否 是补签
const contineDays = ref(0); // 连续签到天数
const signData: any = ref({
  add_sign_in: 1000, // 补签需要消耗的有效投注
  cur_bet: 0, // 当前投注
  day_money: 0, // 当前可领取彩金
  day_status: 0, // 是否已签到, 0未签到，1 已签到，2 已领取签到彩金
  sign_status: [],
  today: 1, // 今天几号
}); // 签到配置信息

// 投注达到当前等级的数据
const currentLevelData = ref({ bet: 0, day: 0, week: 0, month: 0 });
// 投注达到下一等级的数据
const nextLevelData = ref({ bet: 0, day: 0, week: 0, month: 0 });
// 最高奖金数据
const maxLevelData = ref({ bet: 0, day: 0, week: 0, month: 0 });
// 最低奖金数据
const minLevelData = ref({ bet: 0, day: 0, week: 0, month: 0 });
const awardArr: any = ref([])
// 倒计时相关
const dateObj = ref({ // 用于倒计时
  current: '00:00:00',
  curTime: 0,
  endTime: 0
})

// 弹窗标题map
const modalTitleMap = {
  1: "activity_page_tip",
  2: "activity_page_sign_getSuccess",
  3: "activity_page_reSignSuc",
  4: "activity_page_reSignFail",
  5: "activity_page_tip",
  6: "activity_page_tip",
  7: "activity_page_signFail",
};

// 签到结果 0:成功 1:参数错误 2:已签到 3 下注未达到签到要求 4 IP 或 设备已签到
const signTips: any = {
  1: "activity_page_errorP",
  2: "activity_page_signIned",
  3: "activity_page_notEnoughBet",
  4: "activity_page_errorIp"
}

const value = ref(new Date());

const scrollToSection = (section: string) => {
  const element = document.getElementById(section);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
};

const goAwardHandle = () => {
  scrollToSection('sign_award');
  showModal.value = false;
}

const dayClickHandle = (val: any) => {
  if (signData.value.is_open !== 1) {
    showToast.warn(t('activity_page_sign_stop'))
    return false
  }
  console.log(val)
  // 签到参数
  const curTime = convertDateToObject(returnDoTime())
  signData.value.cur_time = {
    ...signData.value.cur_time,
    day: val.date,
    hour: curTime.hour,
    minute: curTime.minute,
    second: curTime.second
  }
  const isToday = signData.value.today === val.date;
  // 当日签到 --- 点击的日期是今天
  if (isToday) {
    if (signData.value.day_status >= 1) {
      console.log('今日已签到')
      return false
    }
    isResign.value = false
    // 未达到有效投注 
    if (!signInBetEnough.value) {
      console.log('未达到有效投注')
      showModal.value = true;
      modalType.value = 7
    } else { // 达到条件，触发签到
      // 今日未签到
      // day_status: 0, // 是否已签到, 0未签到，1 已签到，2 已领取签到彩金
      if (!signData.value.day_status) {
        signInHandle();
      }
    }
  }
  // 补签 --- 点击今天之前的日期，没有签到过，点击补签
  if (val.date < signData.value.today && !signData.value.sign_status.includes(val.date)) {
    isResign.value = true
    console.log('补签!!!!')
    showModal.value = true;
    // 未完成今日签到，点击补签提示
    if (!signData.value.day_status) {
      modalType.value = 5
      return;
    }
    // 补签失败-未达到补签有效投注额，点击补签提示
    if (!resignInBetEnough.value) {
      modalType.value = 4
      return;
    }
    // 补签确认
    modalType.value = 6
  }
};

const shareHandle = () => {
  shareVisible.value = true;
};

const signInHandle = () => {
  if (signData.value.is_open !== 1) {
    return false
  }
  if (!signInBetEnough.value) {
    console.log('未达到有效投注')
    showModal.value = true;
    modalType.value = 7
    return false
  }
  // 跟改到今天
  const curTime = convertDateToObject(returnDoTime())
  signData.value.cur_time = {
    ...signData.value.cur_time,
    day: signData.value.today,
    hour: curTime.hour,
    minute: curTime.minute,
    second: curTime.second
  }
  showModal.value = true;
  modalType.value = 1;
};

// 去投注
const goToBet = () => {
  router.push(`/`)
}

// 获取签到配置信息
const getSignInfo = () => {
  const req = NetPacket.req_sign_in_config();
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_sign_in_list",
    callback: handleSignInfo,
  });
  console.log('CalendarCard', CalendarCard);
}

const handleSignInfo = (res: any) => {
  signData.value = {
    ...res,
    today: res.cur_time.day,
  }
  console.log('[签到配置信息]:', signData.value)
  countTimer(res);
  contineDays.value = countSignInDays(signData.value.sign_status, res.cur_time.day);
  awardArr.value = res.sign_in_cfgs_0.reverse(); // 反转
  // 下一等级的数据
  for (let i = 0; i < awardArr.value.length; i++) {
    if (awardArr.value[i].bet > res.cur_bet) {
      nextLevelData.value = awardArr.value[i];
      currentLevelData.value = i >= 1 ? awardArr.value[i - 1] : awardArr.value[0];
      break;
    }
    if (i === awardArr.value.length - 1 && awardArr.value[i].bet < res.cur_bet) {
      nextLevelData.value = awardArr.value[i];
      currentLevelData.value = awardArr.value[i];
    }
  }
  minLevelData.value = awardArr.value[0];
  maxLevelData.value = awardArr.value[awardArr.value.length - 1];

  const minNeedBet = minLevelData.value.bet;
  const curBet = signData.value.cur_bet;
  const usedBet = signData.value.used_bet;
  // free=否可免流水签到0可以1不可以
  signInBetEnough.value = curBet >= minNeedBet || res.free
  resignInBetEnough.value = curBet - usedBet >= signData.value.add_sign_in
  loading.value = false
}

// 计算连续签到天数
const countSignInDays = (arr: any, today: number) => {
  let currentCount = 0;
  let hasSplit = false;
  for (let i = today; i >= 0; i--) {
    if (arr.includes(i) && !hasSplit) {
      currentCount++;
    } else {
      if (i !== today) {
        hasSplit = true;
      }
    }
  }
  return currentCount;
}
// 计算倒计时
const countTimer = (res: any) => {
  const _day = `${res.cur_time.year}-${res.cur_time.month}-${res.cur_time.day}`;
  const _curTime = `${_day} ${res.cur_time.hour}:${res.cur_time.minute}:${res.cur_time.second}`;
  const _endTime = `${_day} 23:59:59`;
  dateObj.value.curTime = dayjs(_curTime).unix() * 1000
  dateObj.value.endTime = dayjs(_endTime).unix() * 1000
  dateObj.value.current = `${addLeadingZero(res.cur_time.hour)}:${addLeadingZero(res.cur_time.minute)}:${addLeadingZero(res.cur_time.second)}`
  console.log('####', dateObj.value)
}
// 签到动作
const signInAction = () => {
  const req = NetPacket.req_sign_in();
  Object.assign(req.sign_date, JSON.parse(JSON.stringify(signData.value.cur_time)));
  console.log('[签到日期]:', signData.value.cur_time)
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_sign_in",
    callback: handleSignInAc,
  });
}
// 签到结果 0:成功 1:参数错误 2:已签到 3 下注未达到签到要求 4 IP 或 设备已签到
const handleSignInAc = (res: any) => {
  console.log('[签到成功]:', res)
  // 签到结果 0:成功 1:参数错误 2:已签到 3 下注未达到签到要求 4 IP 或 设备已签到
  if (res.result === 0) {
    // bonus=[] 0日奖励1周奖励2月奖
    // 这里只有日奖励,周和月外部独立领取了
    if (res.bonus.length) {
      singInSucInfo.value = {
        money: res.bonus[0],
        // weekNum: res.bonus[1],
        // week: res.bonus[1] !== 0,
        // month: res.bonus[2] !== 0
        weekNum: 1,
        week: false,
        month: false
      }
    }
    showModal.value = true;
    // 补签成功=3; 签到成功=2
    modalType.value = isResign.value ? 3 : 2
    getSignInfo();
  } else if (res.result === 3) {
    // 下注未达到签到要求
    showModal.value = true;
    modalType.value = 7
  } else {
    const tip = signTips[res.result]
    if (tip) {
      showToast.warn(t(tip))
    }
    showModal.value = false;
  }
}

// 领取签到礼金
const getGiftMon = (type: number) => {
  console.log('[领取类型]:', type)
  const req = NetPacket.req_get_signin_extra_reward();
  req.type = type // 0日奖励1周奖励2月奖励
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_get_signin_extra_reward",
    callback: (res: any) => {
      console.log('[领取成功]:', res)
      // 签到结果 0:成功 1没签到或者已经领取， 2下注额度无法领取,3没可周月奖金可领取
      if (res.result === 0) {
        if (type === 1) {
          // 周奖励
          showModal.value = true;
          modalType.value = 2
          singInSucInfo.value = {
            money: signData.value.week_money,
            weekNum: res.pos,
            week: true,
            month: false,
          }
        } else if (type === 2) {
          // 月奖励
          showModal.value = true;
          modalType.value = 2
          singInSucInfo.value = {
            money: signData.value.month_money,
            weekNum: 1,
            week: false,
            month: true,
          }
        }
        setTimeout(() => {
          getSignInfo();
        }, 100)
      } else {
        showToast.warn(t('activity_page_sign_getArardFailed') + res.result)
      }
    },
  });
}

// 计算等级进度
const countProcss = computed(() => {
  if (awardArr.value.length) {
    let rate = (Number(signData.value.cur_bet) / maxLevelData.value.bet) * 100;
    rate = rate > 100 ? 100 : rate
    const obj = {
      rate: rate,
      rateStr: `${rate}%`,
    };
    return obj;
  } else {
    return {
      rate: 0,
      rateStr: `0%`,
    };
  }
})


onMounted(() => {
  getSignInfo()
});
onUnmounted(() => {
});
</script>
<style lang="scss">
.modal_title_icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: 100% 100% !important;
  margin-right: 8px;
  vertical-align: baseline;
  transform: translateY(2px);

  &.type1,
  &.type5,
  &.type6 {
    background: url("/imgs/activity/signIn/icon_m_1.png") no-repeat;
  }

  &.type3,
  &.type2 {
    background: url("/imgs/activity/signIn/icon_m_3.png") no-repeat;
  }

  &.type4,
  &.type7 {
    background: url("/imgs/activity/signIn/icon_m_4.png") no-repeat;
  }
}

.modal_signin {
  padding: 20px;

  .modal_signin_info {
    font-size: 14px;
    color: #fff;

    .notice {
      color: #E43939;
      font-size: 12px;
      text-align: center;
      padding: 10px 0;
    }

    .btns_wrap {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 20px;

      .btn_b {
        display: flex;
        flex: 1;
        height: 44px;
        border-radius: 8px;
        text-align: center;
        line-height: 44px;
        font-size: 14px;

        &.btn_keep_bet {
          background: linear-gradient(180deg, #3246FF 0%, #3110FF 100%) !important;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.activity_signIn {
  height: 100%;
  padding: 10px 10px 70px;
  overflow-y: auto;

  .signIn_main {
    opacity: 0;
    transition: opacity 0.6s;

    &.show {
      opacity: 1;
    }
  }

  .bottom_btns {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: #1b1f4b;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 1px 1px 1px 0px #2E296B inset;

    .btn_b {
      width: 96px;
      height: 40px;
      border-radius: 8px;
      box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset !important;
      background: #282747 !important;
      color: #C6C4F5 !important;
      text-align: center;
      line-height: 40px;
      font-size: 14px;

      &.signin {
        flex: 1;
        color: #ffffff !important;
        box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset !important;
        background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%) !important;
      }
    }

    :deep(.nut-button--disabled) {
      &.signin {
        opacity: 0.3;
      }
    }

  }

  .sign_rule_table {
    margin-top: 10px;
    background: #131232;

    .header {
      display: flex;
      justify-content: space-between;
      background: #394EFF;
      color: #ffffff;
      border-radius: 8px 8px 0 0;
      padding: 10px 0;
      font-size: 14px;
      line-height: 16px;

      .col {
        &:first-child {
          flex: 1.8;
        }

        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 1px;
          height: 42px;
          right: 0;
          top: 0;
          opacity: 0.5;
          background: linear-gradient(to bottom, rgba(172, 177, 186, 0) 0%, #C8CCD2 49.5%, rgba(144, 149, 156, 0) 100%);
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }

    .row {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      background: #181837;

      &:nth-child(odd) {
        background: #282845;
      }

      .col {
        flex: 1;
        text-align: center;
        font-size: 12px;

        &:first-child {
          flex: 1.8;
        }
      }

      &:last-child {
        border-radius: 0 0 8px 8px;
      }
    }
  }

  .sign_desc {
    margin-top: 10px;
    font-size: 12px;
    color: #FFB327;
    text-align: center;
  }

  .btn {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
    color: #ffffff;
    text-align: center;
    line-height: 36px;
    margin-top: 10px;
  }

  .today_total {
    padding: 15px 0 5px;
    position: relative;

    &.showTomorrow {
      padding: 15px 0 15px;

      .tomorrow_cover {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
    }

    .tomorrow_cover {
      position: absolute;
      top: 0;
      left: -11px;
      width: calc(100% + 22px);
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      border-radius: 0;
      display: none;
      font-size: 14px;
      color: #ffffff;

      .time {
        display: flex;
        align-items: center;
        margin-top: 2px;

        :deep(.nut-countdown__content) {
          color: #ffffff;
          font-size: 22px;
          font-weight: 700;
        }
      }

      .icon_clock {
        width: 21px;
        height: 21px;
        display: inline-block;
        background: url("/imgs/activity/signIn/icon_clock.png") no-repeat;
        background-size: 100% 100%;
        margin-right: 5px;
      }
    }

    .row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .col {
        font-size: 12px;
        color: #ffffff;

        .time {
          color: #ffe141;
        }
      }
    }

    .progress {
      width: 100%;
      height: 16px;
      background: #1b1f4b;
      border-radius: 20px;
      position: relative;

      .progress_bar {
        height: 100%;
        background: linear-gradient(90deg, #5567ff 0%, #9e1eff 100%);
        border-radius: 8px;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url("/imgs/activity/signIn/progress_cover.png") repeat-x;
          background-size: auto 110%;
          border-radius: 8px;
        }
      }

      .text_pecent {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        color: #A8A8CA;
        font-size: 10px;
      }

      .icon_coin {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background: url("/imgs/activity/signIn/icon_coin.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  :deep(.nut-calendarcard) {
    background: #181837;
    color: #fff;

    .nut-calendarcard-header {
      display: none;
    }

    .nut-calendarcard-days {
      &:first-child {
        background: #323264;

        .header {
          font-size: 12px;
          font-weight: 600;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            width: 1px;
            height: 35px;
            right: 0;
            opacity: 0.1;
            background: linear-gradient(to bottom, rgba(172, 177, 186, 0) 0%, #C8CCD2 49.5%, rgba(144, 149, 156, 0) 100%);
          }

          &:last-child {
            &::after {
              display: none;
            }
          }
        }
      }

      &:last-child {
        padding: 5px 0;
      }
    }

    .nut-calendarcard-day-inner {
      background: #282845;
      border-radius: 8px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      font-weight: 600;
    }

    .nut-calendarcard-day-top {
      position: absolute;
    }

    .nut-calendarcard-day-bottom {
      position: absolute;
      bottom: 0;
    }

    .nut-calendarcard-day {
      margin-bottom: 0;
      height: 42px;

      &.weekend {
        color: #fff;
      }

      &.prev,
      &.next {
        color: #40406B;

        .nut-calendarcard-day-inner {
          background: transparent;
          border: 1px dashed #40406B;
        }

        .nut-calendarcard-day-bottom {
          display: none
        }
      }

      ;

      .nut-calendarcard-day-inner {
        span {
          display: block;
          border-radius: 8px;

          &.today {
            background: #FFB327;

            &.canSignin {
              background: #1DBA8B;
            }
          }

          &.not_sign {
            background: #E43939;

            &.cantResign {
              background: #40406B;
            }
          }

          &.signed {
            background: transparent !important;
          }
        }
      }

      &.active {
        background: transparent;
        // .nut-calendarcard-day-inner {
        //   background: transparent;
        // }
      }

      .date_icon {
        position: absolute;
        bottom: 4px;
        right: 7px;
        width: 12px;
        height: 12px;

        &.checked {
          background: url("/imgs/activity/signIn/icon_checked.png") no-repeat;
          background-size: 100% 100%;
        }

        &.lost {
          background: url("/imgs/activity/signIn/icon_lost.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .banner {
    width: 100%;

    .imgs {
      width: 100%;
      border-radius: 10px;
      max-height: 135px;
    }
  }

  .content_box {
    margin-top: 10px;
    width: 100%;

    border-radius: 8px;
    background: #131232;
    overflow: hidden;

    .content_box_title {
      height: 34px;
      background: #282845;
      color: #ffffff;
      line-height: 34px;
      padding-left: 10px;
    }

    .content_box_main {
      padding: 12px 11px;

      &.desc {
        font-size: 12px;
        line-height: 20px;
        color: #ffffff;

        p {
          margin-bottom: 6px;
        }
      }
    }
  }
}

.num_color {
  margin-left: 5px;
  color: #ffe141;
}
</style>
